<template>
  <el-skeleton
    style="display: flex; justify-content: space-between; align-items: center"
    :loading="!Boolean(store.state.banniner.BanninerList.length)"
    :count="1"
    animated
  >
    <template #template>
      <el-skeleton-item variant="image" style="width: 25%; height: 190px" />
      <el-skeleton-item
        variant="image"
        style="width: 50%; height: 220px; border-radius: 5px"
      />
      <el-skeleton-item variant="image" style="width: 25%; height: 190px" />
    </template>
    <template #default>
      <el-carousel
        :interval="4000"
        type="card"
        height="250px"
        style="margin-left: 20px"
        autoplay
        initial-index="1"
      >
        <el-carousel-item
          v-if="banniner != null"
          v-for="item in banniner"
          :key="item.targetId"
          :label="item.typeTitle"
          style="border-radius: 10px"
        >
          <el-image
            style="width: 100%; height: 250px"
            :src="item.imageUrl"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </template>
  </el-skeleton>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "Swinper",
  setup() {
    const store = useStore();
    nextTick(() => {
      store.dispatch("banniner/getBanninerList");
    });
    return {
      banniner: computed(() => store.state.banniner.BanninerList),
      store
    };
  },
});
</script>

<style scoped lang="less">

.el-carousel{
}
.el-carousel{
    margin-top: 60px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;

  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>